<template>
    <div class="list">
        <div class="list-status">
            <h1>当前订单状态：已关闭</h1>
            <div>
                <el-button size="small">删除订单</el-button>
                <el-button size="small" @click="addnote">备注订单</el-button>
            </div>
        </div>

        <!--  -->
        <div class="list-info">
            <div class="list-info-icon">
                <el-icon>
                    <GoodsFilled />
                </el-icon>数据列表
            </div>
            <el-table :data="Data" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="orderSn" label="订单编号" :width="1208 / 6" />
                <el-table-column prop="暂无" label="发货单流水号" :width="1208 / 6" />
                <el-table-column prop="memberUsername" label="用户账号" :width="1208 / 6" />
                <el-table-column prop="sourceType" label="支付方式" :width="1208 / 6">
                    <template #default="scope">
                        {{ fomattype(scope.row.sourceType) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sourceType" label="订单来源" :width="1208 / 6" />
                <el-table-column prop="address" label="订单类型" :width="1208 / 6" />
            </el-table>
            <el-table :data="Data" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="date" label="配送方式" :width="1208 / 6" />
                <el-table-column prop="name" label="物流单号" :width="1208 / 6" />
                <el-table-column prop="address" label="自动收货时间" :width="1208 / 6">
                    <template #default="scope">
                        {{ scope.row.autoConfirmDay }}天
                    </template>
                </el-table-column>

                <el-table-column prop="growth" label="订单可得优币" :width="1208 / 6" />
                <el-table-column prop="growth" label="订单可得值" :width="1208 / 6" />
                <el-table-column prop="promotionInfo" label="活动信息" :width="1208 / 6">
                    <template #default="scope">
                        <div class="szie">
                            {{ scope.row.promotionInfo }}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="list-info-icon">
                <el-icon>
                    <GoodsFilled />
                </el-icon>收货人信息
            </div>
            <el-table :data="Data" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="receiverName" label="收货人" width="300" />
                <el-table-column prop="orderSn" label="手机号码" width="300" />
                <el-table-column prop="receiverPostCode" label="邮政编码" width="300" />
                <el-table-column prop="date" label="收货地址">
                    <template #default="scope">
                        <div style="padding:30px 0">
                            {{ scope.row.receiverProvince }}{{ scope.row.receiverRegion }}{{
                                scope.row.receiverDetailAddress
                            }}</div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="list-info-icon">
                <el-icon>
                    <GoodsFilled />
                </el-icon>商品信息
            </div>
            <el-table :data="orderItemList" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="productPic" label="商品图片" width="120">
                    <template #default="scope">
                        <img :src="scope.row.productPic" width="80">
                    </template>
                </el-table-column>
                <el-table-column prop=" name" label="商品名称" align="center">
                    <template #default="scope">
                        <div>{{ scope.row.productName }}</div>
                        <div>品牌:{{ scope.row.productBrand }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="价格/货号" width="120" align="center">
                    <template #default="scope">
                        <div>价格:{{ scope.row.productPrice }}</div>
                        <div>货号:{{ scope.row.productSn }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="productAttr" label="属性" width="120" align="center">
                    <template #default="scope">
                        <div v-for="item in fomatfilter(scope.row.productAttr)">{{ item.key }}:{{ item.value }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="productQuantity" label="数量" width="120" align="center" />
                <el-table-column prop="productPrice" label="小计" width="120" align="center" />
            </el-table>
            <h3 class="productRealPrice">合计：¥{{ sum }}</h3>
            <div class="list-info-icon">
                <el-icon>
                    <GoodsFilled />
                </el-icon>费用信息
            </div>
            <el-table :data="Data" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column label="商品合计" width="300" align="center">
                    <template #default="scope">
                        ￥{{ sum }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="运费" width="300" align="center">
                    <template #default="scope">
                        ￥{{ scope.row.freightAmount }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="优惠卷" width="300" align="center">
                    <template #default="scope">
                        ￥-{{ scope.row.discountAmount }}
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="积分抵扣" align="center">
                    <template #default="scope">
                        ￥-{{ scope.row.integrationAmount }}
                    </template>
                </el-table-column>
            </el-table>
            <el-table :data="Data" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="date" label="活动优惠" width="300" align="center">
                    <template #default="scope">
                        ￥-{{ scope.row.promotionAmount }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="折扣金额" width="300" align="center">
                    <template #default="scope">
                        ￥-{{ scope.row.couponAmount }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="订单总金额" width="300" align="center">
                    <template #default="scope" class="font">
                        <div class="font">
                            ￥{{ sum + scope.row.freightAmount }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="应付款金额" align="center">
                    <template #default="scope">
                        <div class="font">
                            ￥{{ scope.row.freightAmount - scope.row.promotionAmount }}
                        </div>
                    </template>
                </el-table-column>

            </el-table>

            <div class="list-info-icon">
                <el-icon>
                    <GoodsFilled />
                </el-icon>商品信息
            </div>
            <el-table :data="historyList" border style="width: 100%" table-layout="auto"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
                <el-table-column prop="operateMan" label="后台管理员" align="center">
                </el-table-column>
                <el-table-column prop="createTime" label="操作时间" align="center">
                    <template #default="scope">
                        {{ fomatDate(scope.row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" align="center">
                    <template #default="scope">
                        <div>
                            {{ fomatstatus(scope.row.orderStatus) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="付款状态" align="center" />
                <el-table-column prop="orderStatus" label="发货状态" align="center" />
                <el-table-column prop="note" label="备注" align="center" />


            </el-table>
        </div>
        <addord :show="show" @hide="hide" @resh="resh" :id="id" :status="status" />
    </div>
</template>

<script setup lang="ts">
import { user } from "@/api/index"
import { GoodsFilled } from "@element-plus/icons-vue";
import { computed, reactive, ref, toRefs } from "vue";
import { useRoute } from 'vue-router'
import { fomatfilter, fomatDate, fomattype, fomatstatus } from "@/utils/index";
import addord from '@/components/czl/addord.vue'

const route = useRoute()
// 获取路由上的id
const id = Number(route.query.id)

// 创建订单备注弹出框
const show = ref(false)


interface State {
    orderItemList: orderItemList[]
    Data: any
    historyList: historyLis[]
    status: number

}

// 获取数据
const tableData = ref<order>()

const state = reactive<State>({
    orderItemList: [],
    Data: [],
    historyList: [],
    status: 0

})
const getList = () => {
    user.getorderInfo(Number(id)).then(res => {
        if (res.code == 200) {
            state.status = res.data.status
            state.Data.push(res.data)
            state.orderItemList = res.data.orderItemList
            state.historyList = res.data.historyList
        }
    })
}
getList()

// 备注订单
const addnote = () => {
    show.value = true
}
// 关闭弹出框
const hide = () => {
    show.value = false
}

// 刷新
const resh = () => {
    getList()
}

let sum = computed(() => {
    return state.orderItemList.reduce((total: number, item: orderItemList) => item.productQuantity * item.productPrice + total, 0)
})
let { orderItemList, Data, historyList, status } = toRefs(state)

</script>

<style scoped lang="less">
.list {
    width: 1250px;
    margin: 0 auto;
    color: black;
    box-sizing: border-box;
    border: 1px solid rgb(242, 246, 252);

    .list-status {
        height: 80px;
        background: rgb(242, 246, 252);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .list-info {
        padding: 0 20px;

        .list-info-icon {
            margin: 20px 0;
        }
    }
}

.productRealPrice {
    text-align: right;

    span {
        color: red;
    }
}

.szie {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100px;
}

.font {
    color: red;
}
</style>